<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../js/easyui/themes/gray/easyui.css">
	<link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">
	<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../js/easyui/plugins/jquery.datagrid.js"></script>
	<script type="text/javascript" src="../js/datagrid-detailview.js"></script>
	<style type="text/css">
		.logs-detail{
		  width: 1010px;
		  margin: 0 auto;
		  overflow: auto;
		}
		.logs-detail div{
		  width:335px;
		  float:left;
		}
		.logs-detail ul {
		  list-style-type: none;
		  padding:0px;
		  padding:0px;
		  margin:5px 0px;
		}
		.logs-detail ul li{
			line-height: 24px;
			border: 1px dotted #ccc;
			font-size: 12px;
			margin:0px 10px 5px 0px;//top right bottom left
		}
	</style>
	<script type="text/javascript">
	   function query(){
		   $('#mydatagrid').datagrid('load',{
			   userName: $("#userName").val(),
			   realName:$("#realName").val(),
			   password:$("#password").val()
		   });
	   }
	   $(function(){
		   $('#mydatagrid').datagrid({
			    view: detailview,
			    detailFormatter:function(index,row){
			        return '<div class="ddv" style="padding:0px;"></div>';
			    },
			    onExpandRow: function(index,row){
			        var ddv = $(this).datagrid('getRowDetail',index).find('div.ddv');
			        ddv.panel({
			            border:false,
			            cache:false,
			            href:'getInterceptLog?logId='+row.logId,
			            onLoad:function(){
			                $('#mydatagrid').datagrid('fixDetailRowHeight',index);
			            }
			        });
			        $('#mydatagrid').datagrid('fixDetailRowHeight',index);
			    }
			});
		});
	</script>
</head>
<body>
<!--  begin -->
    <div id="main-frame">
		<div id="search-content" style="float:left;margin-bottom:10px;">
		<div id="serar-panel" class="easyui-panel" style="width:1060px;height:auto;padding:3px;" 
				 title="查询" data-options="iconCls:'icon-search',collapsible:true,
				 pagination:true,
				 loadMsg:'正在加载服务器信息...'">
				<table style="font-size:12px">
					<tr>
						<!--
					    <td>监测指令ID：</td>
						<td><input id="commandId" class="easyui-validatebox"
							style="width:80px">
						</td>
						 -->
						<td>username</td>
						<td><input id="userName" class="easyui-validatebox"
							style="width:120px">
						</td>
						<td>realName</td>
						<td><input id="realName" class="easyui-validatebox"
							style="width:110px">
						</td>
						<td>password</td>
						<td><input id="password" class="easyui-validatebox"
							style="width:110px">
						</td>
						<td><a href="javascript:void(0);" class="easyui-linkbutton"
							data-options="iconCls:'icon-search'" onclick="query();">查询</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="molitor-data-content" style="float:left;">
			<table id="mydatagrid" class="easyui-datagrid" title="Monitor-logs" style="width:1060px;height:500px"
	            data-options="singleSelect:true,
	            url:'queryList.do',
	            collapsible:true,
	            fitColumns:true,
	            noheader:true, //Defines if to show panel border.
	            loadMsg:'正在获取数据...',
	            pagination:true,
	            idField:'userName'">
		        <thead>
		            <tr>
		                <th data-options="field:'userName',width:100">用户名</th>
		                <th data-options="field:'realName',width:100">真实姓名</th>
		                <th data-options="field:'password',width:80">password</th>
		            </tr>
		        </thead>
		    </table>
	    </div>
	</div>
</body>
</html>